<template>
	<view>
		<view class="content">
			<view class="title flex-row justify-between">
				<view>基础信息</view>
			</view>
			<u--form labelPosition="left" labelAlign="left" labelWidth="90">
				<u-form-item label="昵称：" borderBottom>
					<text class=""><input type="text" v-model="fieldInfo.name" /></text
				></u-form-item>

				<u-form-item label="性别：" borderBottom>
					<u-radio-group
						placement="row"
						v-model="fieldInfo.gender"
						@change="groupChange"
					>
						<u-radio
							:customStyle="{ marginRight: '20px' }"
							v-for="(item, index) in radiolist"
							:key="index"
							:label="item.name"
							:name="item.name"
							@change="radioChange"
						>
						</u-radio>
					</u-radio-group>
				</u-form-item>

				<u-form-item label="地区：" borderBottom>
					<u-picker
						@cancel="cancel"
						:show="showAddress"
						ref="uPicker"
						:columns="columns"
						keyName="name"
						@confirm="confirm"
						@change="changeHandler"
					></u-picker>
					<text class="addressText" @click="handleAdddress">{{
						addressText
					}}</text>
				</u-form-item>

				<u-form-item label="手机号：" borderBottom>
					<input v-model="fieldInfo.phone"
				/></u-form-item>

				<u-form-item label="备注：" borderBottom>
					<textarea v-model="fieldInfo.description" class="Utextarea flexBox" />
				</u-form-item>
			</u--form>
		</view>

		<view class="content mt20">
			<view class="title flex-row justify-between">
				<view>客户信息</view>
			</view>
			<u--form labelPosition="left" labelAlign="left" labelWidth="90">
				<view v-for="(item, index) in fieldInfoList" :key="index">
					<template v-if="item.status == '1'" class="mt20">
						<u-form-item :label="item.name" borderBottom>
							<text v-if="item.customer == 1" class="redFlag">*</text>
							<input class="inputStyle" v-model="item.value"
						/></u-form-item>
					</template>

					<template v-if="item.status == '2'">
						<u-form-item :label="item.name" borderBottom>
							<text v-if="item.customer == 1" class="redFlag">*</text>
							<u-action-sheet
								:actions="item.radio_text_obj"
								:show="item.flag == 1"
								:closeOnClickOverlay="true"
								:closeOnClickAction="true"
								@select="handleSelectStaff(item, $event)"
							></u-action-sheet>
							<view>
								<text class="ml50" @click="handleShowActionSheet(item)">{{
									item.value || "请选择选项"
								}}</text>
							</view>
						</u-form-item>
					</template>

					<template v-if="item.status == '3'">
						<u-form-item :label="item.name" borderBottom>
							<text v-if="item.customer == 1" class="redFlag">*</text>

							<u-datetime-picker
								:show="item.flag == 1"
								mode="date"
								v-model="value1"
								@confirm="handleConfirm(item, $event)"
								@cancel="item.flag = 0"
							></u-datetime-picker>
							<view>
								<text class="ml50" @click="handleShowDatetime(item)">{{
									item.value || "请选择时间"
								}}</text>
							</view>
						</u-form-item>
					</template>
				</view>
			</u--form>
		</view>
		<view class="listBoxCot_btn">
			<view class="small_btn green" @click="handleClick">提交</view>
		</view>
	</view>
</template>
<script>
import address from "@/components/address.json";
import { getFieldInfoList, saveCustomerInfo } from "@/config/api";
export default {
	data() {
		return {
			remark: "",
			value1: Number(new Date()),
			radiolist: [
				{
					name: "男",
					id: 1,
				},
				{
					name: "女",
					id: 2,
				},
			],
			showDecoration: false,
			gender: "",
			showAddress: false, //是否显示
			columns: [], //省份数据显示，三级联动需要三维数组，展示初始数据
			columnData: [], //市数据
			columnDatas: [], //区地址
			addressText: "请选择城市",
			province_name: "",
			province_id: "",
			city_name: "",
			city_id: "",
			area_name: "",
			userid:
				uni.getStorageSync("clientId") || "wm5m8oBwAA9wbLmopjNxKRdo8ey5D3uA",
			fl_userid: uni.getStorageSync("UserId") || "toney@ikedongli.com",
			area_id: "",
			fieldInfo: {},
			fieldInfoList: [],
		};
	},
	onLoad(options) {
		this.initData();
		this.initDataPicker();
	},
	methods: {
		async handleClick() {
			let {
				name,
				phone,
				gender,
				province_name,
				city_name,
				area_name,
				province_id,
				city_id,
				area_id,
				description,
				field,
				id,
			} = this.fieldInfo;
			let flag = false;

			if (this.fieldInfoList && this.fieldInfoList.length) {
				let resultFilter = this.fieldInfoList.filter((item) => {
					return item.customer == 1;
				});

				resultFilter.map((items) => {
					if (items.value == "") {
						uni.showToast({
							title: "请检查必选项是否输入完整!",
							icon: "none",
							duration: 2000,
						});
						flag = false;
					} else {
						flag = true;
					}
				});
			} else {
				flag = true;
			}

			try {
				if (!!flag) {
					const res = await saveCustomerInfo({
						userid: this.userid,
						fl_userid: this.fl_userid,
						name,
						phone,
						gender: gender == "男" ? "1" : "2",
						province_name,
						city_name,
						area_name,
						province_id,
						city_id,
						area_id,
						description,
						field: JSON.stringify(field),
						id,
					});
					uni.showToast({
						title: "提交成功!",
						icon: "none",
						duration: 2000,
					});
					uni.navigateTo({
						url: "/pages/client/index",
					});
				}
			} catch {
				uni.showToast({
					title: "提交失败!",
					icon: "none",
					duration: 2000,
				});
			}
		},

		isField() {
			let resultFilter = this.fieldInfoList.filter((item) => {
				return item.customer == 1;
			});

			resultFilter.map((items) => {
				if (items.value == "") {
					uni.showToast({
						title: "请检查必选项是否输入完整!",
						icon: "none",
						duration: 2000,
					});
					console.log(111);
					return false;
				} else {
					conslle.log(2222);
					return true;
				}
			});
		},
		async initData() {
			const res = await getFieldInfoList({
				userid: this.userid,
				fl_userid: this.fl_userid,
			});
			this.fieldInfo = res;
			this.fieldInfoList = res.field;
			if (this.fieldInfo.gender == 1) {
				this.fieldInfo.gender = "男";
			} else if (this.fieldInfo.gender == 2) {
				this.fieldInfo.gender = "女";
			} else {
				this.fieldInfo.gender = "";
			}

			this.province_name = res.province_name;
			this.province_id = res.province_id;
			this.city_name = res.city_name;
			this.city_id = res.city_id;
			this.area_name = res.area_name;
			this.area_id = res.area_id;
			if (this.province_name && this.city_name && this.area_name) {
				this.addressText =
					this.province_name + "-" + this.city_name + "-" + this.area_name;
			} else {
				this.addressText = "请选择地址";
			}
		},
		handleAdddress() {
			this.showAddress = true;
		},
		initDataPicker() {
			let province = [];
			let province1 = [{ name: "市辖区", code: "1101" }];
			let province2 = [];
			address.map((item) => {
				province.push(item);
			});

			address[0].children[0].children.map((item) => {
				province2.push(item);
			});

			this.columns.push(province);
			this.columns.push(province1);
			this.columns.push(province2);
			address.map((item) => {
				let city = [];
				item.children.map((item1) => {
					city.push(item1);
				});
				this.columnData.push(city);
			});
			let area = [];
			address.map((item, index) => {
				let area1 = [];
				item.children.map((item1) => {
					area = [];
					item1.children.map((item2) => {
						area.push(item2);
					});
					area1.push(area);
				});
				this.columnDatas.push(area1);
			});
		},
		handleDecoration(e) {
			this.showDecoration = false;
		},
		changeHandler(e) {
			const {
				columnIndex, //当前选择的列，省 / 市 / 区
				value, // 当前选择的数组内容
				values, // values为当前变化列的数组内容
				index, // 当前列的下标值
				indexs, // 当前选择 省 市 区的下表值
				picker = this.$refs.uPicker,
			} = e;
			if (columnIndex === 0) {
				picker.setColumnValues(1, this.columnData[index]); //设置市为该省下面的所有市，index是当前省在省份数组的下标，对应市数组中的下表就是 该省下面的所有市 的数据
				picker.setColumnValues(2, this.columnDatas[index][0]); // 设置区域为该省下面第一个市下面的所有区域
			}
			if (columnIndex === 1) {
				// 当第二列发生变化 变化对应的第三列
				picker.setColumnValues(2, this.columnDatas[indexs[0]][index]); //同上
			}
		},
		confirm(e) {
			this.showAddress = false;
			this.fieldInfo.province_name = e.value[0].name;
			this.fieldInfo.province_id = e.value[0].code;
			this.fieldInfo.city_name = e.value[1].name;
			this.fieldInfo.city_id = e.value[1].code;
			this.fieldInfo.area_name = e.value[2].name;
			this.fieldInfo.area_id = e.value[2].code;
			this.addressText =
				this.fieldInfo.province_name +
				"-" +
				this.fieldInfo.city_name +
				"-" +
				this.fieldInfo.area_name;
		},
		cancel() {
			this.showAddress = false;
		},
		radioChange(n) {},
		groupChange(n) {
			if (n == "男") {
				this.fieldInfoList.gender = "男";
			} else if (n == "女") {
				this.fieldInfoList.gender = "女";
			}

			console.log(this.fieldInfoList.gender);
		},

		handleConfirm(item, e) {
			const timeFormat = uni.$u.timeFormat;
			let timeValue = timeFormat(e.value, "yyyy-mm-dd");
			item.value = timeValue;
			item.flag = 0;
		},
		handleShowDatetime(item) {
			item.flag = 1;
		},
		handleShowActionSheet(item) {
			item.flag = 1;
		},
		handleSelectStaff(item, e) {
			item.value = e.name;
			item.flag = 0;
		},
	},
};
</script>

<style lang="scss">
page {
	padding: 0 30rpx;
	width: 100%;
	/deep/ .u-form-item__body__left {
		align-items: flex-start !important;
	}
	.content {
		background: #fff;
		padding: 0 40rpx;
		margin-top: 20rpx;
	}

	.flexBox {
		// margin-left: 50rpx;
		width: 100%;
	}

	.listBoxCot_btn {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
	}
	.small_btn {
		padding: 10rpx 30rpx;
		border: 1px solid #eaecef;
		border-radius: 10rpx;
		margin-right: 50rpx;
	}
}
.Utextarea {
	height: 200rpx;
}
.title,
.cancel {
	text-align: center;
	line-height: 35rpx;
	font-size: 28rpx;
	padding: 20rpx 0;
}
.cancel {
	border-top: 20rpx solid #eaecef;
}
.list {
	height: 420rpx;
	overflow-y: scroll;
	view {
		text-align: center;
		line-height: 70rpx;
		border-top: 1rpx solid #eaecef;
	}
	& > view:last-child {
		border-bottom: 1rpx solid #eaecef;
	}
}
.title {
	view {
		font-size: 30rpx;
		font-family: PingFang SC-中黑体, PingFang SC;
		font-weight: normal;
		display: flex;
		align-items: center;
		font-weight: 550;
	}
	view:before {
		content: "";
		display: inline-block;
		width: 4rpx;
		height: 30rpx;
		background: #159eec;
		margin-right: 10rpx;
	}
}

.mt20 {
	margin-top: 20rpx;
}
.addressText {
	text-align: left;
	width: 100%;
}
.bgcc {
	width: 100%;
	background-color: #f4f5f7;
}

.ml50 {
	margin-left: 50rpx;
	width: 100%;
}
.w50rpx {
	width: 200rpx;
}

.mt20 {
	margin-top: 20rpx;
}

.redFlag {
	position: absolute;
	left: 50rpx;
	color: red;
	display: inline-block;
}
.green {
	background: rgb(41, 121, 255);
	color: #fff;
}

.inputStyle {
	width: 100%;
	text-align: right;
}
</style>
